import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { GoodNewDjradioWrapper, ContentWrapper } from './style'
import { getNewGoodDjradioAction } from '../../store/actionCreators'
import { formatImg } from '@/utils/format'
import useShowRadioDetail from '@/hooks/useShowRadioDetail'
export default memo(function GoodNewDjradio() {
  const { currentId, newGoodDjradio } = useSelector(state => ({
    currentId: state.getIn(['djRadio', 'currentId']),
    newGoodDjradio: state.getIn(['djRadio', 'newGoodDjradio'])
  }), shallowEqual)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getNewGoodDjradioAction(currentId))
  }, [dispatch, currentId])
  const goToRadioDetail = useShowRadioDetail()
  const recommends = newGoodDjradio|| []
  return (
    <GoodNewDjradioWrapper>
      <h2 className='title'>优秀新电台</h2>
      <ContentWrapper>
        {
          recommends.slice(0,5).map(item => {
            return (
              <div className="item" key={item.id}>
                <img src={formatImg(item.picUrl,150)} alt="" onClick={e => goToRadioDetail(item.id)} />
                <div className="name" onClick={e => goToRadioDetail(item.id)}>{item.name}</div>
                <div className="desc">{item.rcmdtext}</div>
              </div>
            )
          })
        }
      </ContentWrapper>
    </GoodNewDjradioWrapper>
  )
})
